<template>
  <h1>MapXXX方法</h1>
  <h2>全局</h2>
  <p>state</p>
  <p>countAlias: {{ countAlias }}</p>
  <p>countByFn: {{ countByFn }}</p>
  <p>getters</p>
  <p>tenTimes1: {{ tenTimesAlias }}</p>
  <p>countAA1: {{ countAAAlias }}</p>
  <p>mutations</p>
  <button @click="emitIncrementMut">触发incrementMut</button>
  <button @click="increaseAAlias">触发increaseA</button>
  <p>actions</p>
  <button @click="emitIncrementAct">直接触发incrementAct</button>
  <button @click="asyncIncreaseA">触发asyncIncreaseA</button>

  <h2>局部</h2>
  <p>moduleB state</p>
  <p>countB1: {{ countBAlias }}</p>

  <p>moduleB mutations</p>
  <button @click="emitIncreaseB">触发increaseB</button>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
  export default {
    
    computed:{
      // 映射全局state
      ...mapState({
        countAlias: 'count',
        countByFn: state => state.count
      }),
      // 映射全局getter
      ...mapGetters({
        tenTimesAlias:'tenTimes',
        countAAAlias:'countAA'
      }),

      // 映射局部
      ...mapState('b',{
        countBAlias: 'countB'
      }),
      // ...
    },
    methods:{
      // 映射全局mutations
      ...mapMutations({
        incrementMutAlias: 'incrementMut',
        increaseAAlias:'increaseA'
      }),
      emitIncrementMut(){
        this.incrementMutAlias({count:40})
      },
      emitIncrementAct(){
        this.incrementAct({count:400})
      },

      // 映射局部
      ...mapMutations('b',{
        increaseBAlias: 'increaseB'
      }),
      emitIncreaseB(){
        this.increaseBAlias()
      },
      // ...
    }
  }
</script>

<style scoped>

</style>